import { defineConfig, loadEnv } from 'vite';
import path from 'path';
import createVitePlugins from './vite/plugins';
import eslintPlugin from 'vite-plugin-eslint';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { version } from './package.json'; // 从 package.json 中获取版本号
import viteCompression from 'vite-plugin-compression'; // gzip 压缩
import { visualizer } from 'rollup-plugin-visualizer'; // 打包分析工具

// 引入自动引入插件
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig(({ mode, command }) => {
  // 1. 动态环境变量加载
  const env = loadEnv(mode, process.cwd());
  const { VITE_APP_ENV, VITE_API_BASE_URL } = env;

  // 根据环境变量动态设置输出目录
  // 2. 动态设置输出目录
  const outputDir =
    VITE_APP_ENV === 'production' ? '机构后台正式和测试环境包' : '测试环境包';

  return {
    base: VITE_APP_ENV === 'production' ? '/' : '/',
    // 3. 插件配置
    plugins: [
      createVitePlugins(env, command === 'build'), //自定义插件
      eslintPlugin(), //eslint
      vueJsx(),
      viteCompression({ algorithm: 'gzip', threshold: 10240 }),
      // 打包分析
      visualizer({
        filename: `${outputDir}/stats.html`,
        open: true, // 是否自动打开分析报告
      }),
      // 自动引入插件
      AutoImport({
        imports: ['vue', 'vue-router'], // 自动引入 Vue 相关 API
        // resolvers: [ElementPlusResolver()], // 自动引入 Element Plus 组件
      }),
      Components({
        
        // resolvers: [ElementPlusResolver()], // 自动引入 Element Plus 组件
      }),
    ],
    // 4. 构建优化
    build: {
      outDir: outputDir, // 动态设置输出目录
      emptyOutDir: true, // 确保在每次构建时清空输出目录
      minify: 'terser', // 使用 terser 进行代码压缩
      terserOptions: {
        compress: {
          drop_console: true, // 移除 console
          drop_debugger: true, // 移除 debugger
        },
        output: {
          comments: false, // 移除注释
        },
      },
      // 5. 代码分割
      cssCodeSplit: true, // 启用 CSS 代码分割
      // 代码分割部分配置了基于 node_modules 的分割策略，保证第三方库（如 Vue、Axios 等）被单独打包，有利于浏览器缓存。
      rollupOptions: {
        output: {
          // 使用版本号和时间戳生成文件名
          entryFileNames: `assets/[name]-v${version}-[hash].js`,
          chunkFileNames: `assets/[name]-v${version}-[hash].js`,
          assetFileNames: `assets/[name]-v${version}-[hash].[ext]`,
          manualChunks(id) {
            // 将 node_modules 分离到单独的 chunk
            if (id.includes('node_modules')) {
              return id
                .toString()
                .split('node_modules/')[1]
                .split('/')[0]
                .toString();
            }
          },
        },
      },
      chunkSizeWarningLimit: 500, // 警告的 chunk 大小阈值
    },
    resolve: {
      alias: {
        '~': path.resolve(__dirname, './'),
        '@': path.resolve(__dirname, './src'),
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    },
    // 6. 服务器配置
    server: {
      port: 81,
      host: true,
      open: true,
      proxy: {
        '/dev-api': {
          target: VITE_API_BASE_URL,
          changeOrigin: true,
        },
        '/appv2': {
          target: VITE_API_BASE_URL,
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/appv2/, ''),
        },
      },
    },
    // 7. PostCSS 配置，移除了 CSS 文件中的 @charset，这样可以减少不必要的内容。
    css: {
      postcss: {
        plugins: [
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === 'charset') {
                  atRule.remove();
                }
              },
            },
          },
        ],
      },
    },
  };
});
